<template>
  <page-view>
    <router-view v-slot="{ Component }">
      <transition :name="animation">
        <keep-alive exclude="ShopCart,Order">
          <component :is="Component"></component>
        </keep-alive>
      </transition>
    </router-view>

    <div class="footer">
      <router-link to="/main/menu" class="nav-i">
        <div class="iconfont icon">&#xe63c;</div>
        <h3>点餐</h3>
      </router-link>
      <router-link to="/main/order" class="nav-i">
        <div class="iconfont icon">&#xe619;</div>
        <h3>订单</h3>
      </router-link>
      <router-link to="/main/shopCart" class="nav-i">
        <div class="iconfont icon">&#xe73d;</div>
        <h3>购物车</h3>
      </router-link>
      <router-link to="/main/user" class="nav-i">
        <div class="iconfont icon">&#xe614;</div>
        <h3>用户</h3>
      </router-link>
    </div>
  </page-view>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const animation = ref("slide");
let routeIndex = route.meta.index;
watch(route, () => {
  animation.value =
    route.meta.index < routeIndex ? "slide-right" : "slide-left";
  routeIndex = route.meta.index;
});
</script>

<style lang="scss">
.footer {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  width: 100vw;
  z-index: 999;
  border-top: 1px solid lightgray;
  display: flex;
  justify-content: space-around;
  .nav-i {
    width: 60px;
    text-align: center;
    .icon {
      font-size: 24px;
      padding: 5px 0;
    }
    h3 {
      font-size: 14px;
      padding-bottom: 5px;
    }
  }
  .router-link-active {
    color: $primaryColor;
  }
}

.slide-left-enter-from {
  transform: translateX(100%);
}
.slide-right-enter-from {
  transform: translateX(-100%);
}
.slide-left-enter-to,
.slide-left-leave-from,
.slide-left-leave-to,
.slide-right-enter-to,
.slide-right-leave-from,
.slide-right-leave-to {
  transform: translateX(0);
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 200ms linear;
  position: fixed;
}
</style>